<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- css放在head标签 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./css/common.css">
</head>

<body>
    <div id="app">
        <!-- el-container一个容器 -->
        <el-container class="container">
            <!-- header头部 -->
            <el-header class="flex jc-sb aic">
                <span class="fff f16">电影后台管理系统</span>
                <span class="fff">用户模块</span>
                <div>
                    <span class="fff f16">张三</span>
                    <span class="fff f16">退出登录</span>
                </div>
            </el-header>
            <el-container>
                <!-- aside侧边栏 -->
                <el-aside width="200px">
                    <!-- menu面板 -->
                    <el-menu :default-openeds="['1', '3']">
                        <el-menu-item index="1">
                            <a href="">
                                <i class="el-icon-menu"></i>
                                <span>用户模块</span>
                            </a>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <a href="./film.html">
                                <i class="el-icon-menu"></i>
                                <span>电影模块</span>
                            </a>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <i class="el-icon-menu"></i>
                            <span>影院模块</span>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <i class="el-icon-menu"></i>
                            <span>视频模块</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <!-- main主体 -->
                <el-main>Main</el-main>
            </el-container>
        </el-container>
    </div>


    <!-- js放在body底部 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.4/vue.js"></script>
    <!-- elementUI库依赖vue.js, 所以要反正vue.js的后面 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello'
            }
        })
    </script>
</body>

</html>